<template>
	<view class="container">
		<top-back-navbar position="fixed" title="仓单转仓储" background="" color="#fff"></top-back-navbar>
		<cxsytabbars :current="2"></cxsytabbars>
		<view class="box">
			<view class="" v-for="item,index in data_list" style="width: 30%; margin-bottom:15px;" 
			@click="active_inedx =index;get_bei(item)" >
				<view class="item" :style="index == active_inedx? 
				`background: url('${item.activeimgurl}') 0 0 no-repeat;background-size: 100% 100%` :
				`background: url('${item.imgurl}') 0 0 no-repeat;background-size: 100% 100%`"
				style="width: 92px;height: 92px;"
				>
					<p>{{item.value}} 个</p>
				</view>
				<p style="color: #fff; text-align: center; width: 92px;">
					{{item.bei}}倍仓储
				</p>
			</view>
			
			<view class="bottom_box">
				<view class="">
					{{num}}
				</view>
				<view class="">
					→
				</view>
				<view class="">
					{{bei}}倍仓储
				</view>
				<view class="button" @click="zhuanhuan(num)">
					确定
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				nonBreakingSpace: '\u00A0\u00A0\u00A0',
				tixian_x: 0,
				tixian_y: 0,
				openid:0,
				shouyi:0,
				qianbao_data:{},
				img_path_list:[
					{
						img:'/static/images/home/za_item_bg_10.png',
						active:'/static/images/home/za_item_bg_10_active.png',
						value:10,
					},
					{
						img:'/static/images/home/za_item_bg_50.png',
						active:'/static/images/home/za_item_bg_50_active.png',
						value:50,
					},
					{
						img:'/static/images/home/za_item_bg_100.png',
						active:'/static/images/home/za_item_bg_100_active.png',
						value:100,
					},
					{
						img:'/static/images/home/za_item_bg_150.png',
						active:'/static/images/home/za_item_bg_150_active.png',
						value:150,
					},
					{
						img:'/static/images/home/za_item_bg_200.png',
						active:'/static/images/home/za_item_bg_200_active.png',
						value:200,
					},
					{
						img:'/static/images/home/za_item_bg_300.png',
						active:'/static/images/home/za_item_bg_300_active.png',
						value:300,
					},
				],
				active_inedx:0,
				data_list:[],
				num: 0,
				bei:0,
			};
		},
		onLoad: function(e) {
			
			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					_this.openid=id
					_this.get_data()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
			
			
			
		},
		methods: {
			set_data(value){
				var data_list=value.list
				for(var i=0;i<data_list.length;i++){
					data_list[i].imgurl=this.img_path_list[i].img
					data_list[i].activeimgurl=this.img_path_list[i].active
					data_list[i].value=this.img_path_list[i].value
				}
				
				this.data_list=data_list
				this.init_data(this.data_list)
			},
			init_data(value){
				this.bei=value[0].bei
				this.num=value[0].num
				this.active_inedx=0
			},
			get_bei(value){
			
				this.bei=value.bei
				this.num=value.num
			},
			zhuanhuan(num){
				let _this = this
				uni.showModal({
					// title: '温馨提示',
					content: `确定${num}个仓单转仓储吗？`,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#628EFE',
					confirmColor: "#628EFE",
					success(res) {
						if(res.confirm){
							 _this.sure_zhuanhuan(num)
						}
						
				
					}
				})
			},
			sure_zhuanhuan(num){
				var _this=this
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_static_chicang&app=1&type=za&openid=' +
						openid+'&num='+num,
				
					success: res => {
						var data = res.data
						var code = data.error
						console.log(data);
						if (code == 1) {
							uni.showToast({
								icon:'none',
								title:data.message,
								success() {
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
								}
							})
						} else {
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
								success(){
									setTimeout(()=>{
										_this.get_data()	
									},2000)
								}
							})
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_data() {
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_static_chicang_index&app=1&type=za&openid=' +
						openid,
				
					success: res => {
						var data = res.data
						var code = data.error
						if (code == 1) {
							uni.navigateTo({
								url: '/pagesZA/qianbao/qianbao'
							});
						} else {
							this.set_data(data)
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_openid(id) {
				this.openid = id
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {

		height: 100vh;
		background: url('/static/images/home/za_qianbao_bg.png') 0 0 no-repeat;
		// background-size: 150% 106%;
		position: relative;
		padding: 10px 20px 104px;
	}
	.box{
		
		
		display: flex;
		justify-content: space-around;
		 flex-wrap:wrap ;
		 width: 100%;
		     background: linear-gradient(180deg,#05599f,#034072);
		     border-radius: 5px;
		     padding: 20px 0;
		 
		.item{
			width: 100%	;
			// padding: 0 20px 10px;
			background-size: 100% 100% !important;
			
			p{
				color:#fff;
				font-size: 20px;
				line-height: 92px;
				text-align: center;
			}
		}
	}
	.bottom_box{
		margin-top: 20px;
		padding: 0 15px;
		width: 100%;
		display: flex;
		justify-content: space-around;
		color: #fff;
		align-items: center;
		
		view{
			width: 15%;
			text-align: center;
			
		}
		.button{
			    height: 26px;
			    background: linear-gradient(180deg,#1beffe,#0883e8);
			    border-radius: 26px;

		}
	}
	.bottom_box :nth-child(2n-1){
		width: 30%;
		border-bottom: 1px solid #fff;
	}
</style>